<template>
  <div>
    <Loading :loading="loading">
      <Form :ref="formRef" :rules="formDataCheckRules" :label-width="90" :model="formData">
        <FormItem prop="name" label="名称:" style="width:90%">
          <Input type="text" v-model="formData.name" placeholder="请输入" />
        </FormItem>
        <FormItem prop="code" label="编码:" style="width:90%">
          <Input type="text" v-model="formData.code" placeholder="请输入" />
        </FormItem>
        <FormItem prop="type" label="类型:" style="width:90%">
          <Select v-model="formData.type" placeholder="请选择">
            <Option value="Company">公司</Option>
            <Option value="Department">部门</Option>
          </Select>
        </FormItem>
        <FormItem prop="parentId" label="上级:" style="width:90%">
          <RemoteCascader
            :api="orgApi"
            valueKey="id"
            v-model="formData.parentId"
            needQueryParam
            :queryParam="{
            parentId:{
              value: ';'
            }
          }"
            afterQueryParam="parentId"
            lastValue
            clearable
          />
        </FormItem>
        <FormItem prop="describe" label="简介:" style="width:90%">
          <Input type="textarea" :rows="4" v-model="formData.describe" placeholder="请输入" />
        </FormItem>
        <FormItem :style="{width: '90%'}">
          <div :style="{textAlign: 'right'}">
            <Button type="primary" @click="handleSubmit">提交</Button>
          </div>
        </FormItem>
      </Form>
    </Loading>
  </div>
</template>
<script>
import config from "@/utils/config";
import { namespace } from "../module";
import {
  Input,
  Button,
  Form,
  FormItem,
  Message,
  Select,
  Option
} from "view-design";
import Loading from "@/components/Loading";
import RemoteCascader from "@/components/RemoteCascader";
import Uuid from "uuid";
export default {
  components: {
    Loading,
    Input,
    Button,
    Form,
    FormItem,
    Message,
    RemoteCascader,
    Select,
    Option
  },
  props: ["id"],
  beforeMount: async function() {
    let id = this.$route.params.id;
    if (!id) {
      id = this.$props.id;
    }
    let response = await this.$store.dispatch(`${namespace}/getDetail`, {
      id: id
    });
    if (response.errorcode === 0) {
      this.formData = response.data;
    }
  },
  data: function() {
    let vm = this;
    return {
      formRef: Uuid.v1(),
      formData: {}
    };
  },
  methods: {
    handleSubmit: function() {
      let vm = this;
      this.$refs[this.formRef].validate(async valid => {
        if (valid) {
          let response = await vm.$store.dispatch(
            `${namespace}/globalUpdate`,
            vm.formData
          );
          if (response.errorcode === 0) {
            Message.success("提交成功");
            vm.$store.dispatch(`${namespace}/query`);
          }
        }
      });
    }
  },
  computed: {
    formDataCheckRules: function() {
      return {
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        code: [
          {
            required: true,
            message: "请输入",
            trigger: "blur",
            type: "string"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
            type: "string"
          }
        ]
      };
    },
    loading: function() {
      let result = this.$store.state[namespace].loading;
      return result;
    },
    orgApi() {
      return config.serverProxy + config.authServicePath + "/org/getOptions";
    }
  }
};
</script>

<style>
</style>